<template>
<div id="friends">
    <nut-row>
        <nut-col :span="24">
            <div>
                <nut-navbar class="bg" @on-click-back="back" >
                    好友列表
                    <a slot="more-icon" @click="addFriend">添加</a>
                    <a slot="right" @click="searchFriend">搜索</a>
                </nut-navbar>
            </div>

            <nut-dialog title="添加好友" :visible="dialogShow" @ok-btn-click="addFriendPost" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
                <nut-textinput
                        v-model="firendval"
                        label="好友名称："
                        placeholder="请输入内容"
                        :clearBtn="true"
                        :disabled="false"
                />
            </nut-dialog>
        </nut-col>
    </nut-row>

    <nut-infiniteloading
            @loadmore="onInfinite"
            :is-show-mod="true"
            :has-more="isHasMore"
            :is-loading="isLoading"
            :threshold="200">
        <ul class="list">
            <li class="list-item" v-for="item of data" :key="item.id" v-on:click="chat(item.id)">
                <nut-row :gutter="10" align="center" class="warp" v-bind:class="{ warp_live: item.is_live }">
                    <nut-col :span="8">
                        <nut-avatar class="warp-avatar" size="large" :bg-icon="item.avatar"></nut-avatar>
                    </nut-col>
                    <nut-col :span="16" class="warp-name">
                        <span class="warp-span">{{item.name}}</span>
                    </nut-col>
                </nut-row>
            </li>
        </ul>
    </nut-infiniteloading>

</div>
</template>

<script>

import { FriendList, FriendAddByName } from '@/api/friend'
export default {
    name: "friends",
    data() {
        return {
            data: [
            ],
            page: 1,
            page_size: 10,
            isHasMore: false,
            isLoading: false,
            isErr: false,
            timer: null,
            is_live: '',
            dialogShow: false,
            firendval: ""
        }
    },
    created(){
        this.getFriends()
    },
    methods: {
        back() {
            this.$router.back()
        },
        // 后去好友列表
        getFriends() {
            var dd = {
                page: this.page,
                page_size: this.page_size
            };
            FriendList(dd).then(res => {
                if (res.code === 1) {
                    if (!res.data) {
                        this.isHasMore = true
                    }
                    this.data = res.data
                    this.isLoading = false
                }
            }).catch(err => {
                console.log(err)
            })
        },
        onInfinite() {
            this.isLoading = true;
            this.getFriends()
        },
        // 跳转聊天
        chat(user_id) {
            this.$router.push({
                path:"/home/chat",
                query: {
                    user_id: user_id
                }
            })
        },
        // 添加好友
        addFriend() {
            this.dialogShow = true
        },
        // 搜索好友
        searchFriend() {
            this.$router.push({
                path:"/home/search",
            })
        },
        addFriendPost() {
            var dd = {
                user_name: this.firendval
            }
            if (this.firendval != "") {
                FriendAddByName(dd).then(res => {
                    if (res.code === 1) {
                        this.$toast.success(res.message, {
                            duration: 1000,
                            onClose: () => {
                                this.dialogShow = false
                            }
                        })
                    }else {
                        this.$toast.success(res.message, {
                            duration: 1000,
                        })
                    }
                }).catch()
            }
        }
    },
    destroyed() {
        // clearTimeout(this.timer);
    }
}
</script>

<style lang="css" scoped>
.bg {
    background: rgb(69, 193, 160);
    color: #FFFFFF;
}

.warp {
    background: darkgray;
    margin-top: 5px;
    height: 50px;
    text-align: center;
    padding-top: 10px;
}

.warp_live {
    background: green;
}

.warp-name{
    text-align: left;
}
.warp-span {
    display: inline-block;
    height: 50px;
    line-height: 40px;
    width: 60px;
    padding-left: 0px;
}
</style>
